<template>
	<view class="classify-content">
	  <common-header class="header"></common-header>
	  <view class="classify-view" >
	  	<view class="classify-navbar" :style="'height:'+ viewHeight + 'px'">
		  <view 
		  class="classify-navbar-item" 
		  :class="{'classify-nitem-active': current === item.id}" 
		  v-for="item in navList.value" 
		  :key="item.id"
		  @click="getCategory2(item.id)">
			{{item.categoryName}}
		  </view>
	  	</view>
	  	<view class="classify-main" :style="'height:'+ viewHeight + 'px'">
	  			  <image src="https://oss.xuexiluxian.cn/xiaoluxian-vcr/d8d6569ae47843b8b037c96fd268dc2c.jpg" mode=""></image>
	  			  <view>
	  				  <view class="classify-item" v-for="item in list.value" :key="item.id" @click="toDetail(item)">
	  				  	<image :src="item.thumbnail"></image>
	  				  	<view>{{item.categoryName}}</view>
	  				  </view>
	  			  </view>
	  	</view>
	  </view>
	</view>
</template>

<script setup>
import {ref,reactive,toRaw, onMounted, nextTick, onBeforeMount} from 'vue'
import commonHeader from '../../components/common/common-header.vue'
import {getCategoryList,getCategoryList2} from '../../api/classify.js'
import {getViewHeight} from '../../utils/data.js'
const viewHeight = ref(0)
const navList = reactive([{
	id: -1,categoryName: '全部'
}])
const list = reactive([])
const current = ref(-1)
const getCategory2 = async (id) => {
	current.value = id
	let res = await getCategoryList2({categoryId: id})
	list.value = res.data.list || []
}
const toDetail = (item) => {
	
}
onBeforeMount(async ()=>{
	let res = await getCategoryList()
	if (res.data.list.length) {
		navList.value = [{id: -1,categoryName: '全部'},...res.data.list]
	}
	getCategory2(-1)
})
onMounted(()=>{
	nextTick(()=> {
		viewHeight.value = getViewHeight('.header')
	})
})
</script>

<style lang="scss">
.classify-content{
	.classify-view{
		display: flex;
		margin-top: 20rpx;
	}
	.classify-navbar{
		padding-right: 30rpx;
		overflow: auto;
		.classify-navbar-item{
			padding-left: 30rpx;
			height: 100rpx;
			color:#aaabad;
			font-size: 28rpx;
		}
		.classify-nitem-active{
			color: #3780ef;
		}
	}
	.classify-main{
		margin: 0 20rpx;
		flex: 1;
		font-size: 28rpx;
		overflow: auto;
		>image{
			width: 100%;
			height: 250rpx;
			border-radius: 10rpx;
		}
		>view{
			display: flex;
			flex-wrap:wrap;
			padding: 20rpx 0;
		}
		.classify-item{
			text-align: center;
			margin-right: 30rpx;
			width: calc((100% - 60rpx) / 3);
			margin-bottom: 50rpx;
			>image{
				width: 100rpx;
				height: 100rpx;
			}
			>view{
				color:#aaabad;
			}
		}
		.classify-item:nth-child(3n) {
			margin-right: 0;
		}
	}
}
</style>
